<!--
 * @FilePath: Index.vue
 * @Author: jack
 * @Date: 2024-05-14 17:03:57
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-06-27 16:02:43
 * Copyright: 2024 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
-->
<template>
    <div class="layer-common-box">
        <div class="row-center-flex row" :style="index == dataList.length - 1 ? '' : 'margin-bottom:15px;'"
            v-for="(item, index) in dataList" :key="index">
            <div class="flex-name">荣誉{{ index + 1 }}</div>
            <div style="flex: 1;">
                <EditorModule v-model:modelValue="item.content"></EditorModule>
            </div>
            <div class="row" style="width: 80px;">
                <div class="del-btn-box row" @click="toDel(index)" v-if="dataList.length != 1">
                    <el-icon>
                        <RemoveFilled />
                    </el-icon>
                </div>
                <div class="add-btn-box row" @click="toAdd(index)">
                    <el-icon>
                        <CirclePlusFilled />
                    </el-icon>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, h, watch } from 'vue'
import { getScreenSettingList, operateScreenSetting, materialSetting } from '../../Api/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import $util from '../../../util/util'
interface PropsType {
    currentItem?: any
    typeId?: string
}
const props = withDefaults(defineProps<PropsType>(), {
    currentItem: {},
    typeId: ''
})
const emit = defineEmits<EmitType>()
interface EmitType {
    (e: 'getConfig'): void
}
const dataList = ref<any>([
    {
        id: $util.generateUniqueId([]),
        content: ''
    }
])
// 获取所有大屏数据类目配置
const configlist = ref<any>([])
const getScreenConfig = async () => {
    const res: any = await getScreenSettingList({ type_id: props.typeId })
    if (res.code !== 1) return ElMessage.error(res.message)
    if (res.data.length > 0) {
        configlist.value = res.data[0].content
    }
}
// 初始化数据
const getInnit = async () => {
    if (props.currentItem.content && props.currentItem.content.length > 0) {
        dataList.value = JSON.parse(JSON.stringify(props.currentItem.content))
    }
    getScreenConfig()
}
watch(
    () => props.typeId,
    (newValue, oldValue) => {
        getInnit()
    },
    { deep: true, immediate: true, }
)

const toDel = (index: number) => {
    dataList.value.splice(index, 1)
}
const toAdd = (Index: number) => {
    dataList.value.splice(Index + 1, 0, {
        id: $util.generateUniqueId(dataList.value),
        content: ''
    })
}
const submitFrom = async () => {
    // 判断是否有未填写的数据
    let i = 0
    dataList.value.forEach((item: any) => {
        if (!item.content || item.content === '<p><br></p>') {
            i++
        }
    })
    if (i > 0) {
        return ElMessage.error('请输入完整信息再提交！')
    }
    const res: any = await materialSetting({ type_id: props.typeId, content: dataList.value })
    if (res.code !== 1) return ElMessage.error(res.message)
    // 修改成功之后提交大屏配置修改接口
    setConfig()
    ElMessage.success(res.message)
    emit('getConfig')
}
// 大屏配置修改接口
const setConfig = async () => {
    //  先对修改的数据作比较
    const params = {
        type_id: props.typeId,
        content: $util.updateData(dataList.value, configlist.value)
    }
    const res: any = await operateScreenSetting(params)
    if (res.code !== 1) return ElMessage.error(res.message)
    getScreenConfig()
}
const refreshChild = async () => {
    emit('getConfig')
    setTimeout(async () => {
        await getInnit()
    }, 500);
}
onMounted(() => {
})
defineExpose({ submitFrom, refreshChild })
</script>
<style lang="scss" scoped>
.layer-common-box {
    width: 50%;
    height: calc(100vh - 320px);
    overflow-y: scroll;

    .row-center-flex {
        display: flex;
        align-items: center;
        background: #FAFAFA;
        padding: 20px;
        margin-top: 20px;
        color: #737A80;
        border-radius: 3px;

        .flex-name {
            color: #737A80;
            margin-right: 15px;
        }

        .el-icon {
            font-size: 18px;
            cursor: pointer;
            color: #B8B8B8;
            margin-left: 15px;
        }
    }
}
</style>